<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles/base.css">
    <link rel="stylesheet" href="./styles/cform.style.css">
    <script src="./scripts/jquery_1.12.4_jquery.min.js"></script>
    <script src="./scripts/jquery.cform.min.js"></script>
</head>

<body>
    <h1>jQuery表单美化插件jQuery cForm演示</h1>

    <div class="wrap">
        <form action="">
            <ul class="dowebok">
                <li>
                    <label class="label" for="username">用户名：</label>
                    <input type="text" name="username" id="username">
                </li>
                <li>
                    <label class="label" for="password">密码：</label>
                    <input type="password" name="password" id="password"></li>
                <li>
                    <span class="label">性别：</span>
                    <input type="radio" name="sex" id="male" value="男"><label>男</label> <input type="radio" name="sex" id="female" value="女"><label>女</label>
                </li>
                <li>
                    <label class="label" for="city">城市：</label>
                    <select name="city" id="city">
					<option value="">选择</option>
					<option value="北京">北京</option>
					<option value="上海">上海</option>
					<option value="广州">广州</option>
					<option value="深圳">深圳</option>
				</select>
                </li>
                <li>
                    <span class="label">爱好：</span>
                    <input type="checkbox" name="favorite" id="internet" value="上网"><label for="internet">上网</label>
                    <input type="checkbox" name="favorite" id="movie" value="电影"><label for="movie">电影</label>
                    <input type="checkbox" name="favorite" id="music" value="音乐"><label for="music">音乐</label>
                    <input type="checkbox" name="favorite" id="sport" value="运动"><label for="sport">运动</label>
                    <input type="checkbox" name="favorite" id="shopping" value="购物"><label for="shopping">购物</label>
                </li>
                <li>
                    <label class="label" for="avatar">头像：</label>
                    <input type="file" name="avatar" id="avatar">
                </li>
                <li>
                    <label class="label" for="evaluation">自我评价：</label>
                    <textarea name="evaluation" id="evaluation"></textarea>
                </li>
                <li><input class="send" type="submit" value="提交"></li>
            </ul>
        </form>
    </div>

    <script>
        $(function() {
            $('.dowebok').cForm();
        });
    </script>
</body>

</html>